<!--项目收尾--项目结项-->
<template>
  <div>
    <div class="intentional-card">
      <div class="card-header">
        <div class="cap-title">在建项目</div>
      </div>
      <div class="card-table">
        <div class="top-search">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="项目名称" prop="entryName">
              <el-input
                v-model="queryParams.entryName"
                placeholder="请输入项目名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="项目编号" prop="entryNumber">
              <el-input
                v-model="queryParams.entryNumber"
                placeholder="请输入项目编号"
                clearable
              />
            </el-form-item>
            <el-form-item label="项目类型" prop="entryType">
              <el-select v-model="queryParams.entryType" placeholder="项目类型" clearable>
                <el-option
                  v-for="item in entryTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="bottom-container">
          <div style="height: 100%">
            <el-table :data="tableData1" style="width: 100%;" @row-click="handleRowClick1">
              <el-table-column prop="entryName" label="项目名称" width="150"></el-table-column>
              <el-table-column prop="entryNumber" label="项目编号" width="150"></el-table-column>
              <el-table-column prop="entryType" label="项目类型"></el-table-column>
              <el-table-column prop="responsiblePerson" label="负责人"></el-table-column>
              <el-table-column prop="startTime" label="计划开始"></el-table-column>
              <el-table-column prop="endTime" label="计划完成"></el-table-column>
              <el-table-column prop="planStartTime" label="实际开始"></el-table-column>
              <el-table-column prop="planEndTime" label="实际完成"></el-table-column>
              <el-table-column prop="rate" label="完成比"></el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100"
              >
                <template slot-scope="scope">
                  <el-button @click.native.stop="handleClick(scope.row)" type="text" size="small">结项</el-button>
                </template>
              </el-table-column>
            </el-table>
<!--            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="4"
              style="display: flex;justify-content: end; margin-top:20px"
            >
            </el-pagination>-->
          </div>
        </div>
      </div>
    </div>
    <div class="intentional-card">
      <div class="card-header">
        <div class="cap-title">结项记录</div>
        <div>更多</div>
      </div>
      <div class="card-table">
        <div class="bottom-container">
          <div style="height: 100%">
            <el-table :data="tableData2" style="width: 100%;" @row-click="handleRowClick2">
              <el-table-column prop="date" label="结项日期" width="120"></el-table-column>
              <el-table-column prop="entryName" label="项目名称" width="150"></el-table-column>
              <el-table-column prop="entryNumber" label="项目编号" width="150"></el-table-column>
              <el-table-column prop="responsiblePerson" label="项目负责人"></el-table-column>
              <el-table-column prop="summary" label="项目总结" width="350"></el-table-column>
              <el-table-column prop="achieveResults" label="取得成果" width="350"></el-table-column>
              <el-table-column prop="processStatus" label="流程状态"></el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="4"
              style="display: flex;justify-content: end; margin-top:20px"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="80%"
      :close-on-click-modal="false"
      @close="closeModal"
    >
      <project-archives :row="selectedRow" v-if="dialogType=='1'"></project-archives>
      <project-closure-page :row="selectedRow" :closeModal="closeModal" :ModalType="ModalType" v-if="dialogType=='2' || dialogType=='3'"></project-closure-page>
    </el-dialog>
  </div>
</template>

<script>
import projectArchives from '@/views/projectInitiation/components/projectArchives'
import projectClosurePage from './components/projectClosurePage'
export default {
  name: 'projectClosure',
  components: {projectArchives,projectClosurePage},
  data() {
    return {
      queryParams: {
        entryName: '',
        entryNumber: '',
        entryType: undefined
      },
      entryTypeOptions: [
        { label: '防沙治沙', value: '0' },
        { label: '植树造林', value: '1' },
        { label: '绿化改造', value: '2' },
        { label: '机器人造林', value: '3' }
      ],
      tableData1: [
        {
          entryName: '风光一体化防沙治沙',
          entryNumber: 'KYXM20220015',
          entryType: '防沙治沙',
          responsiblePerson: '朱*',
          startTime: '2024-06-01',
          endTime: '2024-12-31',
          planStartTime: '2024-06-01',
          planEndTime: '2024-12-31',
          rate: '0%'
        },
        {
          depart: '申报部门',
          entryName: '三北六期',
          entryNumber: 'KYXM20220016',
          entryType: '植树造林',
          responsiblePerson: '朱*',
          startTime: '2024-06-01',
          endTime: '2024-12-31',
          planStartTime: '2024-06-01',
          planEndTime: '2024-12-31',
          rate: '0%'
        },
        {
          depart: '申报部门',
          entryName: '蚂蚁森林',
          entryNumber: 'KYXM20220017',
          entryType: '绿化改造',
          responsiblePerson: '朱*',
          startTime: '2024-06-01',
          endTime: '2024-12-31',
          planStartTime: '2024-05-01',
          planEndTime: '2024-10-31',
          rate: '10%'
        },
        {
          depart: '申报部门',
          entryName: '蓝旗机器人造林',
          entryNumber: 'KYXM20220018',
          entryType: '机器人造林',
          responsiblePerson: '朱*',
          startTime: '2022-06-01',
          endTime: '2022-12-31',
          planStartTime: '2022-06-01',
          planEndTime: '2022-12-31',
          rate: '100%'
        }
      ],
      tableData2: [
        {
          date: '2023-05-24',
          entryName: '风光一体化防沙治沙',
          entryNumber: 'KYXM20220015',
          responsiblePerson: '朱*',
          summary: '呼和浩特市“三北”工程六期总任务是228.41万亩，2021至2023年已完成71.58万亩，剩余任务156.83万亩',
          achieveResults: '实现了三北工程攻坚战良好开局。今年，已完成防沙治沙604万亩，是去年同期完成量的近4倍。',
          processStatus:'已结束'
        },
        {
          date: '2024-06-14',
          entryName: '三北六期',
          entryNumber: 'KYXM20220016',
          responsiblePerson: '朱*',
          summary: '呼和浩特市“三北”工程六期总任务是228.41万亩，2021至2023年已完成71.58万亩，剩余任务156.83万亩',
          achieveResults: '实现了三北工程攻坚战良好开局。今年，已完成防沙治沙604万亩，是去年同期完成量的近4倍。',
          processStatus:'已结束'
        },
        {
          date: '2022-06-14',
          entryName: '蚂蚁森林',
          entryNumber: 'KYXM20220017',
          responsiblePerson: '朱*',
          summary: '呼和浩特市“三北”工程六期总任务是228.41万亩，2021至2023年已完成71.58万亩，剩余任务156.83万亩',
          achieveResults: '',
          processStatus:'未结束'
        },
        {
          date: '2022-03-14',
          entryName: '蓝旗机器人造林',
          entryNumber: 'KYXM20220018',
          responsiblePerson: '朱*',
          summary: '呼和浩特市“三北”工程六期总任务是228.41万亩，2021至2023年已完成71.58万亩，剩余任务156.83万亩',
          achieveResults: '实现了三北工程攻坚战良好开局。今年，已完成防沙治沙604万亩，是去年同期完成量的近4倍。',
          processStatus:'已结束'
        }
      ],
      currentPage: 1,
      dialogVisible: false,
      selectedRow:'',
      dialogType:'',
      ModalType:''
    }
  },
  methods:{
    /** 搜索按钮操作 */
    handleQuery() {
      //this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClick(row) {
      this.dialogType = '2'
      this.selectedRow = row;
      this.ModalType ='add'
      this.dialogVisible = true
    },

    handleRowClick1(row, column, event){
      this.selectedRow = row;
      this.dialogVisible = true;
      this.dialogType = '1'
    },

    handleRowClick2(row, column, event){
      this.selectedRow = row;
      this.ModalType ='edit'
      this.dialogVisible = true;
      this.dialogType = '3'
    },
    //关闭弹窗
    closeModal(){
      this.selectedRow = {};
      this.dialogVisible=false
    }
  }

}
</script>

<style scoped lang="scss">
.intentional-card {
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  border: 1px solid #e7eff3;
  box-shadow: 0 0 5px #dde9ef;
  width: 100%;
  color: #555;
  background-color: #fff;
  margin: 10px 8px;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 45px;
    padding: 10px;
    border-bottom: 1px solid #e7eff3;

    .cap-title {
      color: #11A983;
      border-bottom: 2px solid #11A983;
      cursor: pointer;
      margin: 0 10px 0 0;
    }
  }

  .card-table {
    padding: 31px 27px;
    height: 100%;

    .bottom-container{
      margin-top: 10px;
    }
  }
}
.page-img{
  width: 100%;
}
</style>
